<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../js/socket.io.slim-2.0.4.js"></script>
    <link href="../element-dist/element-ui@2.3.4-theme-chalk.css" rel="stylesheet">
    <link href="../vue-virtual-scroller-master-536cb52/dist/vue-virtual-scroller.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>

<body>
    <div id="app">
        <el-dialog title="请登录" :visible.sync="loginFormVisible" :close-on-click-modal="false" :show-close="false" :lock-scroll="true"
            width="350px">
            <el-form :model="loginForm">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="loginForm.user" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="loginForm.pwd" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onLogin">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="请填写接口信息" :visible.sync="gatewayFormVisible" :close-on-click-modal="false" :show-close="false" :lock-scroll="true"
            width="560px">
            <el-form :model="gatewayForm">
                <el-form-item label="接口ID" :label-width="formLabelWidth">
                    <el-input v-model="gatewayForm.gatewayID" auto-complete="off" style="width:100%" disabled></el-input>
                </el-form-item>
                <el-form-item label="接口名称" :label-width="formLabelWidth">
                    <el-input v-model="gatewayForm.gatewayDisplayName" auto-complete="off" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="用户ID" :label-width="formLabelWidth">
                    <el-input v-model="gatewayForm.userID" auto-complete="off" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="gatewayForm.password" auto-complete="off" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="经纪商ID" :label-width="formLabelWidth">
                    <el-input v-model="gatewayForm.brokerID" auto-complete="off" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="交易地址" :label-width="formLabelWidth">
                    <el-input v-model="gatewayForm.tdAddress" auto-complete="off" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="行情地址" :label-width="formLabelWidth">
                    <el-input v-model="gatewayForm.mdAddress" auto-complete="off" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="授权码" :label-width="formLabelWidth">
                    <el-input v-model="gatewayForm.authCode" auto-complete="off" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="用户产品信息" :label-width="formLabelWidth">
                    <el-input v-model="gatewayForm.userProductInfo" auto-complete="off" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="接口实现" :label-width="formLabelWidth">
                    <el-input v-model="gatewayForm.gatewayClassName" auto-complete="off" style="width:100%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="warning" @click="gatewayFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveGateway()">保存</el-button>
            </div>
        </el-dialog>

        <template>
            <el-tabs v-model="activeTab" @tab-click="handleTab">
                <el-tab-pane label="交易" name="home" id="p-trade">
                    <el-container>
                        <el-main>
                            <el-row :gutter="10">
                                <el-col style="width:330px">
                                    <el-row>
                                        <el-col class="leftTrade" :style="{ height: leftTradeHeight, width:'330px'}">
                                            <el-row>
                                                <el-form ref="form" :model="tradeForm" label-width="40px" show-message="true" inline-message="true" validate="formValidate">
                                                    <div class="el-form-item">
                                                        <label class="el-form-item__label" style="width: 40px;">代码</label>
                                                        <div class="el-form-item__content" style="margin-left: 40px;">
                                                            <div class="el-input--suffix el-input el-input-group el-input-group--append">
                                                                <input autocomplete="off" type="text" rows="2" validateevent="true" clearable="true" class="el-input__inner" @keyup.enter="subscribe"
                                                                    v-model="tradeForm.rtSymbol">
                                                                <div class="el-input-group__append">
                                                                    <button type="button" class="el-button el-button--default" @click="subscribe">
                                                                </div>
                                                            </div>
                                                            <p>A3</p>
                                                        </div>
                                                    </div>
                                                    <el-form-item label="方向">
                                                        <el-select v-model="tradeForm.direction" placeholder="请选择">
                                                            <el-option label="多" value="多"></el-option>
                                                            <el-option label="空" value="空"></el-option>
                                                        </el-select>
                                                        <p>A2</p>
                                                    </el-form-item>
                                                    <el-form-item label="开平">
                                                        <el-select v-model="tradeForm.offset" placeholder="请选择">
                                                            <el-option label="开仓" value="开仓"></el-option>
                                                            <el-option label="平仓" value="平仓"></el-option>
                                                            <el-option label="平昨" value="平昨"></el-option>
                                                            <el-option label="平今" value="平今"></el-option>
                                                        </el-select>
                                                        <p>A1
                                                            <span class="color-sell">{{leftTrade.askPrice1|numberFormat(4)}}</span>
                                                            <span class="color-count">{{leftTrade.askVolume1}}</span>
                                                        </p>
                                                    </el-form-item>
                                                    <el-form-item label="价格">
                                                        <el-input class="el-input--suffix" v-model="tradeForm.orderPrice"></el-input>
                                                        <p>N
                                                            <span class="color-yellow">{{leftTrade.lastPrice|numberFormat(4)}}</span>
                                                            <span :class="[leftTrade.priceRatio!=null && leftTrade.priceRatio.indexOf('-') != -1 ? 'color-sell' : 'color-buy']">{{leftTrade.priceRatio}}</span>
                                                        </p>
                                                    </el-form-item>
                                                    <el-form-item label="类型">
                                                        <el-select v-model="tradeForm.priceType" placeholder="请选择">
                                                            <el-option label="限价" value="限价"></el-option>
                                                            <el-option label="市价" value="市价"></el-option>
                                                            <el-option label="FAK" value="FAK"></el-option>
                                                            <el-option label="FOK" value="FOK"></el-option>
                                                        </el-select>
                                                        <p>B1
                                                            <span class="color-buy">{{leftTrade.bidPrice1|numberFormat(4)}}</span>
                                                            <span class="color-count">{{leftTrade.bidVolume1}}</span>
                                                        </p>
                                                    </el-form-item>
                                                    <el-form-item label="数量">
                                                        <el-input-number :min="1" class="el-input--suffix" v-model="tradeForm.volume"></el-input-number>
                                                        <p>B2</p>
                                                    </el-form-item>
                                                    <el-form-item label="接口">
                                                        <el-select v-model="tradeForm.gatewayID" placeholder="请选择">
                                                            <el-option label="请选择" value="NULL"></el-option>
                                                            <el-option label="全部" value="ALL"></el-option>
                                                            <el-option v-for="gateway in tradeGateways" :key="gateway.gatewayID" :label="gateway.gatewayDisplayName" :value="gateway.gatewayID"></el-option>
                                                        </el-select>
                                                        <p>B3</p>
                                                    </el-form-item>
                                                    <el-form-item label="填充">
                                                        <el-radio-group v-model="tradeForm.priceFill">
                                                            <el-radio label="最新价"></el-radio>
                                                            <el-radio label="手动"> </el-radio>
                                                            <el-radio label="A/B-1"></el-radio>
                                                        </el-radio-group>
                                                    </el-form-item>
                                                </el-form>
                                            </el-row>
                                            <el-row class="body-left__btn">
                                                <div class="el-col el-col-18">
                                                    <el-button class="el-col el-col-24" type="primary" @click="onSubmit" v-loading="loading.orders">发单</el-button>
                                                    <el-button class="el-col el-col-24" @click="cancelAllOrders" style="margin-top: 10px">全撤</el-button>
                                                </div>
                                            </el-row>
                                        </el-col>
                                    </el-row>

                                    <el-row class="body-left__connection">
                                        <div>服务器连接：
                                            <span>{{connection}}</span>
                                        </div>
                                    </el-row>
                                </el-col>
                                <el-col :style="{width: rightWidth}">
                                    <el-row>
                                        <el-col :span="24" class="virtual-table-wrap">
                                            <div class="virtual-table" style="min-width: 1300px!important;">
                                                <div class="virtual-table-header">
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">合约代码</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">最新价</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">涨跌</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">买一价</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">买一量</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">卖一价</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">卖一量</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">昨收盘</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">成交量</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">持仓量</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">开盘价</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">最高价</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">最低价</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualTickTableColumnWidth}">
                                                        <span class="virtual-table-cell">时间</span>
                                                    </span>
                                                    <span class="virtual-table-th" style="width: 180px">
                                                        <span class="virtual-table-cell">接口</span>
                                                    </span>
                                                </div>
                                                <virtual-scroller :style="{ height: virtualTickTableHeight,width:'100%'}" class="scroller" :items="ticks" item-height="25"
                                                    buffer="100" pool-size="2000">
                                                    <template slot-scope="props">
                                                        <div :key="props.itemKey" class="virtual-table-tr" @click="clickTick(props.item.symbol)">
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell color-yellow">{{props.item.symbol}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell" :class="[props.item.priceRatio!=null && props.item.priceRatio.indexOf('-') != -1 ? 'color-sell' : 'color-buy']">{{props.item.lastPrice|numberFormat(4)}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell" :class="[props.item.priceRatio!=null && props.item.priceRatio.indexOf('-') != -1 ? 'color-sell' : 'color-buy']">{{props.item.priceRatio}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell color-buy">{{props.item.bidPrice1|numberFormat(4)}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell color-count">{{props.item.bidVolume1}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell color-sell">{{props.item.askPrice1|numberFormat(4)}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell  color-count">{{props.item.askVolume1}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.preClosePrice|numberFormat(4)}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.volume}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.openInterest}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.openPrice|numberFormat(4)}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.highPrice|numberFormat(4)}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.lowPrice|numberFormat(4)}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualTickTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.dateTime.millis|timestampFormat('HH:mm:ss.SSS')}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" style="width: 180px">
                                                                <span class="virtual-table-cell">{{props.item.gatewayID}}</span>
                                                            </span>
                                                        </div>
                                                    </template>
                                                </virtual-scroller>
                                            </div>
                                        </el-col>
                                        <el-col :span='24' class="virtual-table-wrap">
                                            <!-- <template>
                                                        <el-table :data="orders" :height="tableHeight" border @cell-dblclick="cancelOrder" :default-sort="{prop: 'orderID', order: 'descending'}">
                                                            <el-table-column sortable prop="orderID" width="90" label="委托编号" :sort-method="ordersSortByTimeAndID">
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" prop="symbol" label="合约代码">
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" prop="direction" label="方向">
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" prop="offset" label="开平">
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" label="价格">
                                                                    <template slot-scope="scope">{{scope.row.price|numberFormat(2)}}</template>
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" prop="totalVolume" label="委托数量">
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" prop="tradedVolume" label="成交数量">
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" prop="status" label="委托状态">
                                                            </el-table-column>
                                                            <el-table-column sortable prop="orderTime" label="委托时间">
                                                            </el-table-column>
                                                            <el-table-column sortable label="委托时间">
                                                                    <template slot-scope="scope">{{scope.row.orderDate +'  '+ scope.row.orderTime }}</template>
                                                            </el-table-column> 
                                                            <el-table-column sortable prop="updateTime" label="更新时间">
                                                            </el-table-column>
                                                            <el-table-column sortable width="220" prop="gatewayID" label="接口">
                                                            </el-table-column>
                                                        </el-table>
                                                    </template> -->
                                            <div class="virtual-table">
                                                <div class="virtual-table-header">
                                                    <span class="virtual-table-th" :style="{width: virtualOrderTableColumnWidth}">
                                                        <span class="virtual-table-cell">委托编号</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualOrderTableColumnWidth}">
                                                        <span class="virtual-table-cell">合约代码</span>
                                                    </span>
                                                    <span class="virtual-table-th" style="width: 50px!important">
                                                        <span class="virtual-table-cell">方向</span>
                                                    </span>
                                                    <span class="virtual-table-th" style="width: 50px!important">
                                                        <span class="virtual-table-cell">开平</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualOrderTableColumnWidth}">
                                                        <span class="virtual-table-cell">价格</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualOrderTableColumnWidth}">
                                                        <span class="virtual-table-cell">委托数量</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualOrderTableColumnWidth}">
                                                        <span class="virtual-table-cell">成交数量</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualOrderTableColumnWidth}">
                                                        <span class="virtual-table-cell">委托状态</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualOrderTableColumnWidth}">
                                                        <span class="virtual-table-cell">委托时间</span>
                                                    </span>
                                                    <span class="virtual-table-th" :style="{width: virtualOrderTableColumnWidth}">
                                                        <span class="virtual-table-cell">更新时间</span>
                                                    </span>
                                                    <span class="virtual-table-th" style="width: 180px">
                                                        <span class="virtual-table-cell">接口</span>
                                                    </span>
                                                </div>
                                                <virtual-scroller :style="{ height: virtualOrderTableHeight,width:'100%'}" class="scroller" :items="orders" item-height="25"
                                                    buffer="100" pool-size="2000">
                                                    <template slot-scope="props">
                                                        <div :key="props.itemKey" class="virtual-table-tr" @dblclick="cancelOrder(props.item.rtOrderID)">
                                                            <span class="virtual-table-td" :style="{width: virtualOrderTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.orderID}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualOrderTableColumnWidth}">
                                                                <span class="virtual-table-cell color-yellow">{{props.item.symbol}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" style="width: 50px!important">
                                                                <span class="virtual-table-cell" :class="[props.item.direction!=null && props.item.direction=='空' ? 'color-sell' : 'color-buy']">{{props.item.direction}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" style="width: 50px!important">
                                                                <span class="virtual-table-cell" :class="[props.item.offset!=null && props.item.offset=='开仓' ? 'color-yellow' : '']">{{props.item.offset}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualOrderTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.price|numberFormat(4)}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualOrderTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.totalVolume}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualOrderTableColumnWidth}">
                                                                <span class="virtual-table-cell color-count">{{props.item.tradedVolume}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualOrderTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.status}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualOrderTableColumnWidth}">
                                                                <!-- <span class="virtual-table-cell">{{props.item.orderDate +'  '+ props.item.orderTime }}</span> -->
                                                                <span class="virtual-table-cell">{{props.item.orderTime }}</span>

                                                            </span>
                                                            <span class="virtual-table-td" :style="{width: virtualOrderTableColumnWidth}">
                                                                <span class="virtual-table-cell">{{props.item.updateTime}}</span>
                                                            </span>
                                                            <span class="virtual-table-td" style="width: 180px">
                                                                <span class="virtual-table-cell">{{props.item.gatewayID}}</span>
                                                            </span>
                                                        </div>
                                                    </template>
                                                </virtual-scroller>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top: 5px">
                                <el-col :span="24">
                                    <el-row :gutter="10">
                                        <el-col :span="12">
                                            <template>
                                                <el-tabs v-model="activeTabLeft" type="card" @tab-click="handleTabLeft">
                                                    <el-tab-pane label="成交" class="virtual-table-wrap" name="trade">
                                                        <div class="virtual-table">
                                                            <div class="virtual-table-header">
                                                                <span class="virtual-table-th">
                                                                    <span class="virtual-table-cell">成交编号</span>
                                                                </span>
                                                                <span class="virtual-table-th">
                                                                    <span class="virtual-table-cell">委托编号</span>
                                                                </span>
                                                                <span class="virtual-table-th">
                                                                    <span class="virtual-table-cell">合约代码</span>
                                                                </span>
                                                                <span class="virtual-table-th" style="width: 50px!important">
                                                                    <span class="virtual-table-cell">方向</span>
                                                                </span>
                                                                <span class="virtual-table-th" style="width: 50px!important">
                                                                    <span class="virtual-table-cell">开平</span>
                                                                </span>
                                                                <span class="virtual-table-th">
                                                                    <span class="virtual-table-cell">价格</span>
                                                                </span>
                                                                <span class="virtual-table-th">
                                                                    <span class="virtual-table-cell">成交量</span>
                                                                </span>
                                                                <span class="virtual-table-th">
                                                                    <span class="virtual-table-cell">成交时间</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width: virtualTradeTableGatewayIDColumnWidth}">
                                                                    <span class="virtual-table-cell">接口</span>
                                                                </span>
                                                            </div>
                                                            <virtual-scroller :style="{ height: virtualTradeTableHeight,width:'100%',overflowY:'scroll'}" class="scroller" :items="trades"
                                                                item-height="25" buffer="100" pool-size="2000">
                                                                <template slot-scope="props">
                                                                    <div :key="props.itemKey" class="virtual-table-tr" @click="clickTick(props.item.symbol)">
                                                                        <span class="virtual-table-td">
                                                                            <span class="virtual-table-cell">{{props.item.tradeID}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td">
                                                                            <span class="virtual-table-cell">{{props.item.orderID}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td">
                                                                            <span class="virtual-table-cell color-yellow">{{props.item.symbol}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" style="width: 50px!important">
                                                                            <span class="virtual-table-cell" :class="[props.item.direction!=null && props.item.direction=='空' ? 'color-sell' : 'color-buy']">{{props.item.direction}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" style="width: 50px!important">
                                                                            <span class="virtual-table-cell" :class="[props.item.offset!=null && props.item.offset=='开仓' ? 'color-yellow' : '']">{{props.item.offset}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td">
                                                                            <span class="virtual-table-cell">{{props.item.price|numberFormat(4)}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td">
                                                                            <span class="virtual-table-cell">{{props.item.volume}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td">
                                                                            <span class="virtual-table-cell">{{props.item.tradeTime}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width: virtualTradeTableGatewayIDColumnWidth}">
                                                                            <span class="virtual-table-cell">{{props.item.gatewayID}}</span>
                                                                        </span>
                                                                    </div>
                                                                </template>
                                                            </virtual-scroller>
                                                        </div>
                                                    </el-tab-pane>
                                                    <el-tab-pane label="日志" name="log" class="virtual-table-wrap">
                                                        <div class="virtual-table">
                                                            <div style="width:4000px" class="virtual-table-header">
                                                                <span class="virtual-table-th" style="width: 180px">
                                                                    <span class="virtual-table-cell">时间</span>
                                                                </span>
                                                                <span class="virtual-table-th">
                                                                    <span class="virtual-table-cell">级别</span>
                                                                </span>
                                                                <span class="virtual-table-th" style="width: 3600px;text-align: left;">
                                                                    <span class="virtual-table-cell">内容</span>
                                                                </span>
                                                            </div>
                                                            <virtual-scroller :style="{ height:virtualLogTableHeight,width:'4000px'}" class="scroller" :items="logs" item-height="25"
                                                                buffer="100" pool-size="2000">
                                                                <template slot-scope="props">
                                                                    <div :key="props.itemKey" class="virtual-table-tr">
                                                                        <span class="virtual-table-td" style="width: 180px">
                                                                            <span class="virtual-table-cell">{{props.item.logTimestamp|timestampFormat('')}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td">
                                                                            <span class="virtual-table-cell">{{props.item.logLevel}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" style="width: 3600px;text-align: left;">
                                                                            <span class="virtual-table-cell">{{props.item.logContent}}</span>
                                                                        </span>
                                                                    </div>
                                                                </template>
                                                            </virtual-scroller>
                                                        </div>
                                                    </el-tab-pane>
                                                </el-tabs>
                                            </template>
                                        </el-col>
                                        <el-col :span="12">
                                            <template>
                                                <el-tabs v-model="activeTabRight" type="card" @tab-click="handleTabLeft">
                                                    <el-tab-pane label="持仓" name="position" class="virtual-table-wrap">
                                                        <div class="virtual-table">
                                                            <div class="virtual-table-header">
                                                                <span class="virtual-table-th" :style="{width:virtualPositionTableColumnWidth}">
                                                                    <span class="virtual-table-cell">合约代码</span>
                                                                </span>
                                                                <span class="virtual-table-th" style="width: 50px!important">
                                                                    <span class="virtual-table-cell">方向</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualPositionTableColumnWidth}">
                                                                    <span class="virtual-table-cell">持仓</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualPositionTableColumnWidth}">
                                                                    <span class="virtual-table-cell">昨持仓</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualPositionTableColumnWidth}">
                                                                    <span class="virtual-table-cell">冻结量</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualPositionTableColumnWidth}">
                                                                    <span class="virtual-table-cell">价格</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualPositionTableColumnWidth}">
                                                                    <span class="virtual-table-cell">持仓盈亏</span>
                                                                </span>
                                                                <span class="virtual-table-th" style="width: 180px">
                                                                    <span class="virtual-table-cell">接口</span>
                                                                </span>
                                                            </div>
                                                            <virtual-scroller :style="{ height: virtualPositionTableHeight,width:'100%',overflowY:'scroll'}" class="scroller" :items="positions"
                                                                item-height="25" buffer="100" pool-size="2000">
                                                                <template slot-scope="props">
                                                                    <div :key="props.itemKey" class="virtual-table-tr" @click="clickTick(props.item.symbol)">
                                                                        <span class="virtual-table-td" :style="{width:virtualPositionTableColumnWidth}">
                                                                            <span class="virtual-table-cell color-yellow">{{props.item.symbol}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" style="width: 50px!important">
                                                                            <span class="virtual-table-cell" :class="[props.item.direction!=null && props.item.direction=='空' ? 'color-sell' : 'color-buy']">{{props.item.direction}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualPositionTableColumnWidth}">
                                                                            <span class="virtual-table-cell">{{props.item.position}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualPositionTableColumnWidth}">
                                                                            <span class="virtual-table-cell">{{props.item.ydPosition}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualPositionTableColumnWidth}">
                                                                            <span class="virtual-table-cell">{{props.item.frozen}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualPositionTableColumnWidth}">
                                                                            <span class="virtual-table-cell">{{props.item.price|numberFormat(4)}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualPositionTableColumnWidth}">
                                                                            <span class="virtual-table-cell" :class="[props.item.positionProfit!=null && props.item.positionProfit<0 ? 'color-sell' : 'color-buy']">{{props.item.positionProfit}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" style="width: 180px">
                                                                            <span class="virtual-table-cell">{{props.item.gatewayID}}</span>
                                                                        </span>
                                                                    </div>
                                                                </template>
                                                            </virtual-scroller>
                                                        </div>
                                                    </el-tab-pane>
                                                    <el-tab-pane label="资金" name="money" class="virtual-table-wrap">
                                                        <!-- <el-table :data="accounts" :height="tableHeight" width="90" border style="width: 100%" :default-sort="{prop: 'gatewayID', order: 'descending'}">
                                                            <el-table-column sortable width="90" prop="accountID" label="账户">
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" label="昨结">
                                                                <template slot-scope="scope">{{scope.row.preBalance|numberFormat(0)}}</template>
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" label="净值">
                                                                <template slot-scope="scope">{{scope.row.balance|numberFormat(0)}}</template>
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" label="可用">
                                                                <template slot-scope="scope">{{scope.row.available|numberFormat(0)}}</template>
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" label="手续费">
                                                                <template slot-scope="scope">{{scope.row.commission|numberFormat(0)}}</template>
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" label="保证金">
                                                                <template slot-scope="scope">{{scope.row.margin|numberFormat(0)}}</template>
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" label="平仓盈亏">
                                                                <template slot-scope="scope">{{scope.row.closeProfit|numberFormat(0)}}</template>
                                                            </el-table-column>
                                                            <el-table-column sortable width="90" label="持仓盈亏">
                                                                <template slot-scope="scope">{{scope.row.positionProfit|numberFormat(0)}}</template>
                                                            </el-table-column>
                                                            <el-table-column sortable prop="gatewayID" label="接口">
                                                            </el-table-column>
                                                        </el-table> -->
                                                        <div class="virtual-table">
                                                            <div class="virtual-table-header">
                                                                <span class="virtual-table-th" :style="{width:virtualAccountTableColumnWidth}">
                                                                    <span class="virtual-table-cell">账户</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualAccountTableColumnWidth}">
                                                                    <span class="virtual-table-cell">昨结</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualAccountTableColumnWidth}">
                                                                    <span class="virtual-table-cell">净值</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualAccountTableColumnWidth}">
                                                                    <span class="virtual-table-cell">可用</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualAccountTableColumnWidth}">
                                                                    <span class="virtual-table-cell">手续费</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualAccountTableColumnWidth}">
                                                                    <span class="virtual-table-cell">平仓盈亏</span>
                                                                </span>
                                                                <span class="virtual-table-th" :style="{width:virtualAccountTableColumnWidth}">
                                                                    <span class="virtual-table-cell">持仓盈亏</span>
                                                                </span>
                                                                <span class="virtual-table-th" style="width: 180px">
                                                                    <span class="virtual-table-cell">接口</span>
                                                                </span>
                                                            </div>
                                                            <virtual-scroller :style="{ height: virtualAccountTableHeight,width:'100%',overflowY:'scroll'}" class="scroller" :items="accounts"
                                                                item-height="25" buffer="100" pool-size="2000">
                                                                <template slot-scope="props">
                                                                    <div :key="props.itemKey" class="virtual-table-tr">
                                                                        <span class="virtual-table-td" :style="{width:virtualAccountTableColumnWidth}">
                                                                            <span class="virtual-table-cell">{{props.item.accountID}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualAccountTableColumnWidth}">
                                                                            <span class="virtual-table-cell">{{props.item.preBalance|numberFormat(0)}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualAccountTableColumnWidth}">
                                                                            <span class="virtual-table-cell" :class="[props.item.balance!=null && props.item.preBalance!=null  && (props.item.balance - props.item.preBalance)<0 ? 'color-sell' : 'color-buy']">{{props.item.balance|numberFormat(0)}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualAccountTableColumnWidth}">
                                                                            <span class="virtual-table-cell">{{props.item.available|numberFormat(0)}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualAccountTableColumnWidth}">
                                                                            <span class="virtual-table-cell">{{props.item.commission|numberFormat(0)}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualAccountTableColumnWidth}">
                                                                            <span class="virtual-table-cell" :class="[props.item.closeProfit!=null && props.item.closeProfit<0 ? 'color-sell' : 'color-buy']">{{props.item.closeProfit|numberFormat(0)}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" :style="{width:virtualAccountTableColumnWidth}">
                                                                            <span class="virtual-table-cell" :class="[props.item.positionProfit!=null && props.item.positionProfit<0 ? 'color-sell' : 'color-buy']">{{props.item.positionProfit}}</span>
                                                                        </span>
                                                                        <span class="virtual-table-td" style="width: 180px">
                                                                            <span class="virtual-table-cell">{{props.item.gatewayID}}</span>
                                                                        </span>
                                                                    </div>
                                                                </template>
                                                            </virtual-scroller>
                                                        </div>
                                                    </el-tab-pane>
                                                </el-tabs>
                                            </template>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-main>
                    </el-container>
                </el-tab-pane>
                <el-tab-pane label="接口" name="gateway" id="p-gateway">
                    <el-main style="padding:8px 0px;">
                        <el-row>
                            <el-col :span='24'>
                                <el-button size="mini" type="primary" plain @click="addOrEditGateway()">新增</el-button>
                                <el-button size="mini" type="success" plain @click="getGateway()">刷新</el-button>
                            </el-col>
                            <el-col :span='24' class="gateway-frame" v-loading="loading.gateways">
                                <template>
                                    <el-table size="small" :data="gateways" :height="maxTableHeight" border :default-sort="{prop: 'gatewayID', order: 'descending'}">
                                        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
                                        <el-table-column sortable prop="runtimeStatus" width="60" label="状态">
                                            <template slot-scope="scope">{{scope.row.runtimeStatus}}</template>
                                        </el-table-column>
                                        <el-table-column sortable prop="gatewayID" width="180" label="接口ID">
                                        </el-table-column>
                                        <el-table-column sortable prop="gatewayDisplayName" label="接口名称">
                                        </el-table-column>
                                        <el-table-column sortable width="120" prop="userID" label="用户ID">
                                        </el-table-column>
                                        <el-table-column sortable width="120" prop="password" label="密码">
                                        </el-table-column>
                                        <el-table-column sortable width="120" prop="brokerID" label="经纪商ID">
                                        </el-table-column>
                                        <el-table-column sortable width="120" prop="tdAddress" label="交易地址">
                                        </el-table-column>
                                        <el-table-column sortable width="120" prop="mdAddress" label="行情地址">
                                        </el-table-column>
                                        <el-table-column sortable width="120" prop="authCode" label="授权码">
                                        </el-table-column>
                                        <el-table-column sortable width="120" prop="userProductInfo" label="用户产品信息">
                                        </el-table-column>
                                        <el-table-column sortable width="280" prop="gatewayClassName" label="接口实现">
                                        </el-table-column>
                                        <el-table-column sortable width="230" label="操作">
                                            <template slot-scope="scope">
                                                <el-button size="mini" round @click="deleteGateway(scope.$index, scope.row)">删除</el-button>
                                                <el-button size="mini" round @click="addOrEditGateway(scope.$index, scope.row)">修改</el-button>
                                                <el-button size="mini" round @click="changeGatewayConnectStatus(scope.$index, scope.row)">连接/断开</el-button>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                </template>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-tab-pane>
                <el-tab-pane label="ZEUS" name="zeus" id="p-zeus">
                    <el-main style="padding:8px 0px;">
                        <el-row>
                            <el-col :span='24'>
                                <el-button size="mini" type="primary" plain @click="loadZeusStrategy">加载策略</el-button>
                                <el-button size="mini" type="success" plain @click="changeZeusStrategyStatus('','initAll')">全部初始化</el-button>
                                <el-button size="mini" type="danger" plain @click="changeZeusStrategyStatus('','startAll')">全部启动</el-button>
                                <el-button size="mini" type="warning" plain @click="changeZeusStrategyStatus('','stopAll')">全部停止</el-button>
                                <el-button size="mini" type="primary" plain @click="getZeusStrategy">刷新</el-button>
                                <!--<el-button type="info" plain>保持持仓</el-button>-->
                            </el-col>
                            <el-col :span='24' class="zeus-frame zeus-frame__top" :style="{ height: topFrame}" v-loading="loading.strategyInfos">
                                <div class="zeus-frame__top_section" v-for="item in strategyInfos">
                                    <div class="itemName">
                                        <b>策略名称</b>=[ {{item.strategyName}} ]
                                        <b>策略ID</b>=[ {{item.strategyID}} ] 初始化状态:
                                        <el-tag type="success" v-if="item.initStatus">{{item.initStatus}}</el-tag>
                                        <el-tag type="danger" v-else>{{item.initStatus}}</el-tag>
                                        交易状态:
                                        <el-tag type="success" v-if="item.trading">{{item.trading}}</el-tag>
                                        <el-tag type="danger" v-else>{{item.trading}}</el-tag>

                                        <el-button size="mini" :id="item.strategyID" round @click="changeZeusStrategyStatus(item.strategyID,'init')">初始化</el-button>
                                        <el-button size="mini" round @click="changeZeusStrategyStatus(item.strategyID,'start')">启动</el-button>
                                        <el-button size="mini" round @click="changeZeusStrategyStatus(item.strategyID,'stop')">停止</el-button>
                                        <el-button size="mini" round @click="changeZeusStrategyStatus(item.strategyID,'reload')">销毁重新加载</el-button>
                                    </div>
                                    <template>
                                        <el-table :data="[item.paramMap]" stripe style="width: 100%; margin-bottom: 0px;">
                                            <el-table-column :pro="subindex" :label="subindex" v-for="(subitem, subindex) in item.paramMap" width="120">
                                                <template scope="scope">
                                                    {{[item.paramMap][scope.$index][subindex]}}
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </template>
                                    <template>
                                        <el-table :data="[item.varMap]" stripe style="width: 100%">
                                            <el-table-column :pro="subindex" :label="subindex" v-for="(subitem, subindex) in item.varMap" width="120">
                                                <template scope="scope">
                                                    {{[item.varMap][scope.$index][subindex]}}
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </template>
                                </div>
                            </el-col>
                            <el-col :span='24' :style="{ height: topFrame}">

                            </el-col>
                        </el-row>
                    </el-main>
                </el-tab-pane>
                <el-tab-pane label="查询合约" name="search" v-loading="loading.contracts" class="virtual-table-wrap" id="p-contract">
                    <div class="virtual-table">
                        <div class="virtual-table-header">
                            <span class="virtual-table-th" :style="{width:virtualContractTableColumnWidth}">
                                <span class="virtual-table-cell">合约代码</span>
                            </span>
                            <span class="virtual-table-th" :style="{width:virtualContractTableColumnWidth}">
                                <span class="virtual-table-cell">交易所</span>
                            </span>
                            <span class="virtual-table-th" :style="{width:virtualContractTableColumnWidth}">
                                <span class="virtual-table-cell">RT系统代码</span>
                            </span>
                            <span class="virtual-table-th" :style="{width:virtualContractTableColumnWidth}">
                                <span class="virtual-table-cell">ExpiryDate</span>
                            </span>
                            <span class="virtual-table-th" :style="{width:virtualContractTableColumnWidth}">
                                <span class="virtual-table-cell">名称</span>
                            </span>
                            <span class="virtual-table-th" :style="{width:virtualContractTableColumnWidth}">
                                <span class="virtual-table-cell">合约类型</span>
                            </span>
                            <span class="virtual-table-th" :style="{width:virtualContractTableColumnWidth}">
                                <span class="virtual-table-cell">大小</span>
                            </span>
                            <span class="virtual-table-th" :style="{width:virtualContractTableColumnWidth}">
                                <span class="virtual-table-cell">最小价格变动</span>
                            </span>
                            <span class="virtual-table-th" :style="{width:virtualContractTableColumnWidth}">
                                <span class="virtual-table-cell">操作</span>
                            </span>
                        </div>
                        <virtual-scroller :style="{ height: virtualContractTableHeight,width:'100%',overflowY:'scroll'}" class="scroller" :items="contracts"
                            item-height="25" buffer="100" pool-size="2000">
                            <template slot-scope="props">
                                <div :key="props.itemKey" class="virtual-table-tr">
                                    <span class="virtual-table-td" :style="{width:virtualContractTableColumnWidth}">
                                        <span class="virtual-table-cell">{{props.item.symbol}}</span>
                                    </span>
                                    <span class="virtual-table-td" :style="{width:virtualContractTableColumnWidth}">
                                        <span class="virtual-table-cell">{{props.item.exchange}}</span>
                                    </span>
                                    <span class="virtual-table-td" :style="{width:virtualContractTableColumnWidth}">
                                        <span class="virtual-table-cell">{{props.item.rtSymbol}}</span>
                                    </span>
                                    <span class="virtual-table-td" :style="{width:virtualContractTableColumnWidth}">
                                        <span class="virtual-table-cell">{{props.item.expiryDate}}</span>
                                    </span>
                                    <span class="virtual-table-td" :style="{width:virtualContractTableColumnWidth}">
                                        <span class="virtual-table-cell">{{props.item.name}}</span>
                                    </span>
                                    <span class="virtual-table-td" :style="{width:virtualContractTableColumnWidth}">
                                        <span class="virtual-table-cell">{{props.item.productClass}}</span>
                                    </span>
                                    <span class="virtual-table-td" :style="{width:virtualContractTableColumnWidth}">
                                        <span class="virtual-table-cell">{{props.item.size}}</span>
                                    </span>
                                    <span class="virtual-table-td" :style="{width:virtualContractTableColumnWidth}">
                                        <span class="virtual-table-cell">{{props.item.priceTick}}</span>
                                    </span>
                                    <span class="virtual-table-td" :style="{width:virtualContractTableColumnWidth,color:'#409EFF'}" @click="contractClick(props.item)">
                                        <span class="virtual-table-cell">订阅</span>
                                    </span>
                                </div>
                            </template>
                        </virtual-scroller>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
</body>
<!-- 先引入 Vue -->
<script src="../js/vue.min-2.5.16.js"></script>
<script src="../js/axios.min-0.18.0.js"></script>
<!-- 引入组件库 -->
<script src="../element-dist/element-ui@2.3.4.js"></script>
<script src="../vue-observe-visibility-master-0b71163/dist/vue-observe-visibility.min.js"></script>
<script src="../vue-virtual-scroller-master-536cb52/dist/vue-virtual-scroller.min.js"></script>

<script>
    var host = "//" + window.location.host;
    var hostname = window.location.hostname;
    var port = window.location.port
    var socket = null;

    function sortTime(a, b) {
        return b.logTime.replace(/:/g, "") - a.logTime.replace(/:/g, "")
    }

    function sortVtOrderID(a, b) {
        return parseInt(b.match(/[0-9]*/g).join("")) - parseInt(a.match(/[0-9]*/g).join(""))
    }

    function sortSymbol(a, b) {
        // console.log(a.symbol )
        // console.log(b.symbol )
        return a.symbol.localeCompare(b.symbol);
    }

    function formatDate(date, fmt) {
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4-RegExp.$1.length));
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'H+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds(),
            'S+': date.getMilliseconds()
        };
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + '';
                if(k ==  'S+'){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : leftZeroPad(str,3));
                }else{
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : leftZeroPad(str,2));
                }
            }
        }
        return fmt;
    };

    function leftZeroPad(val, minLength) {
        if (typeof(val) != "string")
            val = String(val);
        return ("000000000000000000".substring(0, minLength - val.length)) + val;
    }

    Vue.filter('numberFormat', function (value, decimals) {

        if(value == undefined){
            return undefined;
        }
        if (Math.abs(value) > 10000000000) {
            return value.toExponential(decimals)
        }
        if (isNaN(value)) {
            vaule = 0
        }
        return (value.toFixed(decimals));
    });
    Vue.filter('timestampFormat', function (timestamp, formatStr) {
        let date = new Date(timestamp);
        if(formatStr){
            return formatDate(date, formatStr)
        }else{
            return formatDate(date, "yyyy-MM-dd HH:mm:ss.S")
        }
    });
    // Vue.use(VueObserveVisibility)
    Vue.component('virtual-scroller', VueVirtualScroller.VirtualScroller)
    new Vue({
        el: '#app',
        data: function () {

            let returnObj = {
                rightWidth: (window.innerWidth - 330 || 1000) + "px",
                virtualOrderTableColumnWidth: ((window.innerWidth - 330 - 50 * 2 - 180 - 80) / 8 || 90) +
                    "px",
                virtualTradeTableGatewayIDColumnWidth: (window.innerWidth / 2 - 90 * 6 - 50 * 2 - 80 ||
                    180) + "px",
                virtualPositionTableColumnWidth: ((window.innerWidth / 2 - 50 - 180 - 60) / 6 || 90) +
                    "px",
                virtualAccountTableColumnWidth: ((window.innerWidth / 2 - 180 - 60) / 7 || 90) + "px",
                virtualContractTableColumnWidth: ((window.innerWidth - 60) / 9 || 90) + "px",
                virtualTickTableColumnWidth: ((window.innerWidth - 330 - 180 - 60) / 14 || 90) + "px",

                tableHeight: (window.innerHeight - 85) / 3 - 5 || 250,
                maxTableHeight: (window.innerHeight - 85) - 5 || 250,
                winHeight: window.innerHeight,
                virtualTableHeight: ((window.innerHeight - 85) / 3 - 5 || 250) + "px",
                virtualTickTableHeight: ((window.innerHeight - 85) / 3 - 5 || 250) + "px",
                virtualOrderTableHeight: ((window.innerHeight - 85) / 3 - 5 || 250) + "px",
                virtualTradeTableHeight: ((window.innerHeight - 85) / 3 - 85 || 250) + "px",
                virtualLogTableHeight: ((window.innerHeight - 85) / 3 - 85 || 250) + "px",
                virtualPositionTableHeight: ((window.innerHeight - 85) / 3 - 85 || 250) + "px",
                virtualAccountTableHeight: ((window.innerHeight - 85) / 3 - 85 || 250) + "px",
                virtualContractTableHeight: ((window.innerHeight - 55) || 250) + "px",
                leftTradeHeight: ((window.innerHeight - 85) / 3 * 2 - 30 || 250) + "px",
                topFrame: window.innerHeight * 2 / 3 - 65 + "px",
                bottomFrame: window.innerHeight / 3 - 65 + "px",
                tradeForm: {
                    volume: 1,
                    rtSymbol: '',
                    orderPrice: '',
                    direction: '',
                    offset: '',
                    priceType: '限价',
                    gatewayID: "NULL",
                    priceFill: "最新价"
                },
                tradeGateways: [],
                loginForm: {
                    user: "",
                    pwd: ""
                },
                gatewayForm: {
                    gatewayID: "",
                    gatewayDisplayName: "",
                    userID: "",
                    password: "",
                    brokerID: "",
                    tdAddress: "",
                    mdAddress: "",
                    authCode: "",
                    userProductInfo: "",
                    gatewayClassName: ""

                },
                loginFormVisible: true,
                gatewayFormVisible: false,
                formLabelWidth: '120px',
                gatewayFormLableWith: '200px',
                tickObj: {},
                connection: '未连接',
                activeTab: "home",
                activeTabLeft: 'trade',
                activeTabRight: 'position',
                orderObj: {}, //委托对象
                logs: [], //日志
                ticks: [],
                tickMap: new Map(),
                mixTickMap: new Map(),
                positions: [], //持仓
                positionMap: new Map(),
                orders: [], //委托
                orderMap: new Map(),
                ordersChange: false,
                trades: [], //成交
                tradeMap: new Map(),
                tradesChange: false,
                accounts: [], //资金
                accountMap: new Map(),
                gateways: [],
                gatewayMap: new Map(),
                strategyInfos: [], //合约查询结果
                contracts: [], //合约查询结果
                leftTrade: {}, //存放左侧交易区显示数据
                config: {}, //存放token等数据
                loading: {
                    subScribe: false,
                    orders: false,
                    contracts: false,
                    strategyInfos: false,
                    token: false,
                    gateway: false
                },
            }

            let token = sessionStorage.getItem("token");

            if (token != undefined && token != "") {
                returnObj.config.token = token
                returnObj.loginFormVisible = false;
            }
            return returnObj

        },
        created: function () {
            if (this.config.token != undefined && this.config.token != "") {
                socket = io.connect(hostname + ":" + (port - 1) + "?token=" + this.config.token, {
                    transports: ['websocket']
                })

                this.socketIORegister();

                this.initData();
            }

        },
        mounted: function () {
            const that = this
            window.onresize = () => {
                return (() => {
                    that.rightWidth = (window.innerWidth - 330 || 1000) + "px";
                    that.virtualOrderTableColumnWidth = ((window.innerWidth - 330 - 50 * 2 -
                        180 - 80) / 8 || 90) + "px";
                    that.virtualTradeTableGatewayIDColumnWidth = (window.innerWidth / 2 - 90 *
                        6 - 50 * 2 - 80 || 180) + "px";
                    that.virtualPositionTableColumnWidth = ((window.innerWidth / 2 - 50 - 180 -
                        60) / 6 || 90) + "px";
                    that.virtualAccountTableColumnWidth = ((window.innerWidth / 2 - 180 - 60) /
                        7 || 90) + "px";
                    that.virtualContractTableColumnWidth = ((window.innerWidth - 60) / 9 || 90) +
                        "px";
                    that.virtualTickTableColumnWidth = ((window.innerWidth - 330 - 180 - 60) /
                        14 || 90) + "px";

                    that.tableHeight = (window.innerHeight - 85) / 3 - 5 || 250;
                    that.maxTableHeight = (window.innerHeight - 85) - 5 || 250;
                    that.winHeight = window.innerHeight;
                    that.virtualTableHeight = ((window.innerHeight - 85) / 3 - 5 || 250) + "px";
                    that.virtualTickTableHeight = ((window.innerHeight - 85) / 3 - 5 || 250) +
                        "px";
                    that.virtualOrderTableHeight = ((window.innerHeight - 85) / 3 - 5 || 250) +
                        "px";
                    that.virtualTradeTableHeight = ((window.innerHeight - 85) / 3 - 85 || 250) +
                        "px";
                    that.virtualLogTableHeight = ((window.innerHeight - 85) / 3 - 85 || 250) +
                        "px";
                    that.virtualPositionTableHeight = ((window.innerHeight - 85) / 3 - 85 ||
                        250) + "px";
                    that.virtualAccountTableHeight = ((window.innerHeight - 85) / 3 - 85 || 250) +
                        "px";
                    that.virtualContractTableHeight = ((window.innerHeight - 55) || 250) + "px";
                    that.leftTradeHeight = ((window.innerHeight - 85) / 3 * 2 - 30 || 250) +
                        "px";
                    that.topFrame = window.innerHeight * 2 / 3 - 65 + "px";
                    that.bottomFrame = window.innerHeight / 3 - 65 + "px";
                })()
            }
            that.$nextTick(function () {
                setInterval(that.tickTableFreshTimer, 400);
                setInterval(that.orderTableFreshTimer, 1000);
                setInterval(that.tradeTableFreshTimer, 1000);
            })
        },
        watch: {
            // tableHeight (val) {
            //     if (!this.timer) {
            //         this.tableHeight = val
            //         this.timer = true
            //         let that = this
            //         setTimeout(function () {
            //             that.init()
            //             that.timer = false
            //         }, 400)
            //     }
            // }
        },
        methods: {
            tickTableFreshTimer() {
                let tmpTicks = Array.from(this.tickMap.values())
                this.ticks = tmpTicks.sort(sortSymbol)
            },
            orderTableFreshTimer() {
                if (this.ordersChange) {
                    this.ordersChange = false
                    let tmpOrders = Array.from(this.orderMap.values())
                    this.orders = tmpOrders.sort(this.sortOrdersByTimeAndID).reverse()
                }
            },
            tradeTableFreshTimer() {
                if (this.tradesChange) {
                    this.tradesChange = false
                    let tmpTrades = Array.from(this.tradeMap.values())
                    this.trades = tmpTrades.sort(this.sortTradesByTimeAndID).reverse()
                }
            },
            sortOrdersByTimeAndID(orderA, orderB) {
                let dtA = (orderA.orderDate + "" + orderA.orderTime).replace(/:/g, "").replace(/null/g, "").replace(
                    /undefined/g, "")
                let dtAInt = 0
                if (dtA != undefined && dtA != "") {
                    dtAInt = parseInt(dtA)
                }

                let dtB = (orderB.orderDate + "" + orderB.orderTime).replace(/:/g, "").replace(/null/g, "").replace(
                    /undefined/g, "")
                let dtBInt = 0
                if (dtB != undefined && dtB != "") {
                    dtBInt = parseInt(dtB)
                }
                // console.log(orderA)
                // console.log(dtBInt)
                // console.log(dtAInt)
                return (dtAInt * 100000000 + parseInt(orderA.orderID)) - (dtBInt * 100000000 + parseInt(orderB.orderID))
            },
            sortTradeByTimeAndID(tradeA, tradeB) {
                let dtA = (tradeA.tradeDate + "" + tradeA.tradeTime).replace(/:/g, "").replace(/null/g, "").replace(
                    /undefined/g, "")
                let dtAInt = 0
                if (dtA != undefined && dtA != "") {
                    dtAInt = parseInt(dtA)
                }

                let dtB = (tradeB.tradeDate + "" + tradeB.tradeTime).replace(/:/g, "").replace(/null/g, "").replace(
                    /undefined/g, "")
                let dtBInt = 0
                if (dtB != undefined && dtB != "") {
                    dtBInt = parseInt(dtB)
                }
                // console.log(tradeA)
                // console.log(dtBInt)
                // console.log(dtAInt)
                // console.log(dtAInt * 100000000 + parseInt(tradeA.tradeID))
                // console.log(dtBInt * 100000000  + parseInt(tradeB.tradeID))

                return (dtAInt * 100000000 + parseInt(tradeA.tradeID)) - (dtBInt * 100000000 + parseInt(tradeB.tradeID))
            },
            onLogin() {
                let userName = this.loginForm.user,
                    pwd = this.loginForm.pwd;
                this.getToken(userName, pwd)
            },

            getToken(username, password) {
                const that = this;
                that.loading.token = true;
                axios.get(host + '/getToken?username=' + username + '&password=' + password)
                    .then(function (res) {
                        that.loading.token = false;
                        if (res.status == 200 && res.data.resultCode == "success") {
                            that.$message({
                                message: '已登录',
                                type: 'success'
                            });
                            that.config.token = res.data.data
                            sessionStorage.setItem('token', res.data.data);

                            that.loginFormVisible = false

                            socket = io.connect(hostname + ":" + (port - 1) + "?token=" + res.data.data, {
                                transports: ['websocket']
                            })

                            that.socketIORegister();

                            that.initData();

                        } else {
                            that.$notify({
                                title: '警告',
                                message: 'token获取失败，用户名或密码错误!',
                                type: 'warning',
                                duration: 4500,
                            });
                        }
                    })
                    .catch(function (err) {
                        console.log(err)
                        that.loading.token = false;
                        that.$notify({
                            title: '错误',
                            message: 'token获取失败，连接错误!',
                            type: 'error',
                            duration: 0,
                        });
                    });
            },
            initData() {
                this.getGateway()
                this.loadData('getAccounts', 'accounts')
                this.loadData('getTrades', 'trades')
                this.loadData('getPositions', 'positions')
                this.loadData('getOrders', 'orders')
                this.loadData('getLogs', 'logs')
            },
            socketIORegister() {
                this.registerConnectionStatus()
                this.registerAccount()
                this.registerTick()
                this.registerLog()
                this.registerPosition()
                this.registerOrder()
                this.registerTrade()
            },
            changeGatewayConnectStatus(index, row) {
                let gatewayID = row.gatewayID
                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                const that = this;
                that.$confirm('此操作将更改接口状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    axios.post(host + "/changeGatewayConnectStatus", {
                            gatewayID: gatewayID,
                            token: this.config.token
                        })
                        .then(res => {
                            if (res.data.resultCode == "success") {
                                that.$message({
                                    type: 'success',
                                    message: '连接/断开命令已发出!'
                                });
                                that.getGateway();
                            } else {
                                that.$notify({
                                    title: '警告',
                                    message: '连接/断开命令发送失败,服务器未返回成功!',
                                    type: 'warning',
                                    duration: 4500
                                });
                            }
                        })
                        .catch(err => {
                            console.log(err)
                            that.$notify({
                                title: '错误',
                                message: '连接/断开命令发送失败,发生异常!',
                                type: 'error',
                                duration: 4500
                            });
                        })


                }).catch(() => {
                    that.$message({
                        type: 'info',
                        message: '已取消连接/断开操作'
                    });
                });

            },
            deleteGateway(index, row) {
                let gatewayID = row.gatewayID
                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                const that = this;
                that.$confirm('此操作将断开并删除接口配置, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    axios.post(host + "/deleteGateway", {
                            gatewayID: gatewayID,
                            token: this.config.token
                        })
                        .then(res => {
                            if (res.data.resultCode == "success") {
                                that.$message({
                                    type: 'success',
                                    message: '删除接口成功!'
                                });
                                that.getGateway();
                            } else {
                                that.$notify({
                                    title: '警告',
                                    message: '删除接口失败,服务器未返回成功!',
                                    type: 'warning',
                                    duration: 4500
                                });
                            }
                        })
                        .catch(err => {
                            console.log(err)
                            that.$notify({
                                title: '错误',
                                message: '删除接口失败,发生异常!',
                                type: 'error',
                                duration: 0
                            });
                        })


                }).catch(() => {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addOrEditGateway(index, row) {
                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if (row == undefined) {
                    this.gatewayForm.gatewayID = "";
                    this.gatewayForm.gatewayDisplayName = "";
                    this.gatewayForm.userID = "";
                    this.gatewayForm.password = "";
                    this.gatewayForm.brokerID = "";
                    this.gatewayForm.tdAddress = "";
                    this.gatewayForm.mdAddress = "";
                    this.gatewayForm.authCode = "";
                    this.gatewayForm.userProductInfo = "";
                    this.gatewayForm.gatewayClassName = "xyz.redtorch.trader.gateway.ctp.CtpGateway";
                } else {
                    this.gatewayForm.gatewayID = row.gatewayID;
                    this.gatewayForm.gatewayDisplayName = row.gatewayDisplayName;
                    this.gatewayForm.userID = row.userID;
                    this.gatewayForm.brokerID = row.brokerID;
                    this.gatewayForm.password = row.password;
                    this.gatewayForm.tdAddress = row.tdAddress;
                    this.gatewayForm.mdAddress = row.mdAddress;
                    this.gatewayForm.authCode = row.authCode;
                    this.gatewayForm.userProductInfo = row.userProductInfo;
                    this.gatewayForm.gatewayClassName = row.gatewayClassName;
                }

                this.gatewayFormVisible = true;
            },
            saveGateway(index, row) {
                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                console.log(this.gatewayForm)

                if (this.gatewayForm.gatewayDisplayName == "" || this.gatewayForm.gatewayDisplayName ==
                    undefined) {
                    this.$alert('请填写接口名称！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                if (this.gatewayForm.userID == "" || this.gatewayForm.userID == undefined) {
                    this.$alert('请填写用户ID！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                if (this.gatewayForm.password == "" || this.gatewayForm.password == undefined) {
                    this.$alert('请填写密码！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                if (this.gatewayForm.tdAddress == "" || this.gatewayForm.tdAddress == undefined) {
                    this.$alert('请填写交易地址！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                if (this.gatewayForm.mdAddress == "" || this.gatewayForm.mdAddress == undefined) {
                    this.$alert('请填写行情地址！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                if (this.gatewayForm.gatewayClassName == "" || this.gatewayForm.gatewayClassName == undefined) {
                    this.$alert('请填写接口实现！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                let addressPatt =
                    /^(tcp:\/\/)(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(:\d{2,5})$/;

                if (!addressPatt.test(this.gatewayForm.tdAddress)) {
                    this.$alert('交易地址不正确！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }


                if (!addressPatt.test(this.gatewayForm.mdAddress)) {
                    this.$alert('行情地址不正确！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }


                const that = this;

                axios.post(host + "/saveGateway", {
                        token: that.config.token,
                        gatewayID: that.gatewayForm.gatewayID,
                        gatewayDisplayName: that.gatewayForm.gatewayDisplayName,
                        userID: that.gatewayForm.userID,
                        password: that.gatewayForm.password,
                        brokerID: that.gatewayForm.brokerID,
                        tdAddress: that.gatewayForm.tdAddress,
                        mdAddress: that.gatewayForm.mdAddress,
                        authCode: that.gatewayForm.authCode,
                        userProductInfo: that.gatewayForm.userProductInfo,
                        gatewayClassName: that.gatewayForm.gatewayClassName
                    })
                    .then(res => {
                        if (res.data.resultCode == "success") {
                            that.$message({
                                message: '保存接口成功',
                                type: 'success'
                            });
                            that.gatewayFormVisible = false;
                            that.getGateway();
                        } else {
                            that.$notify({
                                title: '警告',
                                message: '保存接口失败,服务器未返回成功',
                                type: 'warning',
                                duration: 4500,
                            });
                        }
                    })
                    .catch(err => {
                        console.log(err)
                        that.$notify({
                            title: '错误',
                            message: '保存接口失败,发生异常',
                            type: 'error',
                            duration: 0,
                        });
                    })




            },

            changeZeusStrategyStatus(strategyID, actionType) {

                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }


                let that = this,
                    action = "";
                switch (actionType) {
                    case "init":
                        action = "初始化"
                        break;
                    case "stop":
                        action = "停止"
                        break;
                    case "start":
                        action = "启动"
                        break;
                    case "initAll":
                        action = "初始化"
                        break;
                    case "stopAll":
                        action = "停止"
                        break;
                    case "startAll":
                        action = "启动"
                        break;
                    case "reload":
                        action = "销毁重新加载"
                        break;
                }

                that.$confirm(action + '指令将更改策略状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    axios.post(host + "/zeus/changeStrategyStatus", {
                            strategyID: strategyID,
                            actionType: actionType,
                            token: this.config.token
                        })
                        .then(res => {
                            if (res.data.resultCode == "success") {
                                that.$message({
                                    message: action + '指令发送成功',
                                    type: 'success'
                                });
                                that.getZeusStrategy();
                            } else {
                                that.$notify({
                                    title: '错误',
                                    message: action + '指令发送失败,服务器未返回成功',
                                    type: 'error',
                                    duration: 4500,
                                });
                            }
                        })
                        .catch(err => {
                            console.log(err)
                            that.$notify({
                                title: '错误',
                                message: action + '指令发送失败,发生异常',
                                type: 'error',
                                duration: 0,
                            });
                        })


                }).catch(() => {
                    that.$message({
                        type: 'info',
                        message: '已取消' + action + '指令'
                    });
                });


            },
            loadZeusStrategy() {

                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                const that = this;
                axios.get(host + '/zeus/loadStrategy?token=' + that.config.token)
                    .then(res => {
                        if (res.data.resultCode == "success") {
                            that.$message({
                                message: '加载策略指令已发送',
                                type: 'success'
                            });
                            that.getZeusStrategy();
                        } else {
                            that.$notify({
                                title: '警告',
                                message: '加载策略指令失败，服务器未返回成功',
                                type: 'warning',
                                duration: 4500
                            });
                        }
                    }).catch(err => {

                        console.log(err);
                        that.$notify({
                            title: '错误',
                            message: '加载策略指令失败，发生异常',
                            type: 'error',
                            duration: 0,
                        });
                    })
            },
            getZeusStrategy() {

                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                const that = this;
                that.loading.strategyInfos = true;
                axios.get(host + "/zeus/getStrategyInfos?token=" + this.config.token)
                    .then(res => {
                        that.loading.strategyInfos = false;
                        if (res.status == 200 && res.data.resultCode == "success") {
                            that.strategyInfos = res.data.data
                        } else {
                            that.$notify({
                                title: '警告',
                                message: '获取策略列表失败，服务器未返回成功',
                                type: 'warning',
                                duration: 4500,
                            });
                        }
                    })
                    .catch(err => {
                        that.loading.strategyInfos = false;
                        console.log(err);
                        that.$notify({
                            title: '错误',
                            message: '获取策略列表失败，发生异常',
                            type: 'error',
                            duration: 0,
                        });
                    })

            },
            loadData(apiName, dataArr) {
                const that = this;

                if (this.config.token !== undefined) {
                    gInfo(apiName, this.config.token)
                } else {
                    axios.get(host + '/token?username=test&password=test', {

                        })
                        .then(function (res) {
                            if (res.status == 200 && res.data.resultCode == "success") {
                                let token = res.data.data
                                gInfo(apiName, token)
                            } else {
                                that.$notify({
                                    title: '警告',
                                    message: 'token获取失败，服务器未返回成功',
                                    type: 'warning',
                                    duration: 4500,
                                });
                            }
                        })
                        .catch(function (err) {
                            console.log(err)
                            that.$notify({
                                title: '错误',
                                message: 'token获取失败,发生异常',
                                type: 'error',
                                duration: 0,
                            });
                        });
                }

                function gInfo(apiName, token) {
                    axios.get(host + "/" + apiName + "?token=" + token)
                        .then(res => {
                            if (res.data.resultCode == "success") {
                                if ('getOrders' == apiName) {
                                    let tmpOrders = res.data.data.sort(that.sortOrdersByTimeAndID)
                                    tmpOrders.forEach(function (order) {
                                        that.orderMap.set(order.rtOrderID, order);
                                    });
                                    that[dataArr] = that[dataArr].concat(tmpOrders).reverse()
                                } else if ('getTrades' == apiName) {
                                    let tmpTrades = res.data.data.sort(that.sortTradeByTimeAndID)
                                    tmpTrades.forEach(function (trade) {
                                        that.tradeMap.set(trade.rtTradeID, trade);
                                    });
                                    that[dataArr] = that[dataArr].concat(tmpTrades).reverse()
                                } else if ('getPositions' == apiName) {
                                    let tmpPositions = res.data.data
                                    tmpPositions.forEach(function (position) {
                                        that.positionMap.set(position.rtPositionName, position);
                                    });
                                    that.positions = Array.from(that.positionMap.values()).sort(sortSymbol)
                                } else {
                                    that[dataArr] = that[dataArr].concat(res.data.data).reverse()
                                }

                            } else {
                                that.$notify({
                                    title: '警告',
                                    message: 'API:' + apiName + '加载数据失败,服务器未返回成功!',
                                    type: 'warning',
                                    duration: 4500
                                });
                            }
                        })
                        .catch(err => {
                            console.log(err)
                            that.$notify({
                                title: '错误',
                                message: 'API:' + apiName + '加载数据失败,发生异常!',
                                type: 'error',
                                duration: 0
                            });
                        })
                }
            },
            onSubmit(e) {

                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                if (this.tradeForm.rtSymbol == "") {
                    this.$alert('请填写代码！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if (this.tradeForm.orderPrice == "") {
                    this.$alert('请填写价格！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if (this.tradeForm.volume == "") {
                    this.$alert('请填写数量！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if (this.tradeForm.priceType == "") {
                    this.$alert('请选择价格类型！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if (this.tradeForm.direction == "") {
                    this.$alert('请选择方向类型！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if (this.tradeForm.offset == "") {
                    this.$alert('请选择开平！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                if (this.tradeForm.gatewayID == 'NULL') {
                    this.$alert('请选择接口！', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                this.loading.orders = true;

                const that = this;
                if (this.tradeForm.gatewayID == 'ALL') {
                    this.tradeGateways.forEach(gatewayInfo => {
                        axios.post(host + '/sendOrder', {
                                rtSymbol: that.tradeForm.rtSymbol,
                                price: that.tradeForm.orderPrice,
                                volume: that.tradeForm.volume,
                                priceType: that.tradeForm.priceType,
                                direction: that.tradeForm.direction,
                                offset: that.tradeForm.offset,
                                gatewayID: gatewayInfo.gatewayID,
                                token: that.config.token,
                            })
                            .then(function (res) {
                                that.loading.orders = false;
                                if (res.data.resultCode == "success") {
                                    that.$message({
                                        message: '发单成功',
                                        type: 'success'
                                    });
                                } else {
                                    that.$notify({
                                        title: '警告',
                                        message: '发单失败,服务器未返回成功',
                                        type: 'warning',
                                        duration: 4500,
                                    });
                                }
                            })
                            .catch(function (err) {
                                console.log(err);
                                that.loading.orders = false;
                                that.$notify({
                                    title: '错误',
                                    message: '发单失败,发生异常',
                                    type: 'error',
                                    duration: 0,
                                });
                            });
                    })
                } else {
                    axios.post(host + '/sendOrder', {
                            rtSymbol: that.tradeForm.rtSymbol,
                            price: that.tradeForm.orderPrice,
                            volume: that.tradeForm.volume,
                            priceType: that.tradeForm.priceType,
                            direction: that.tradeForm.direction,
                            offset: that.tradeForm.offset,
                            gatewayID: that.tradeForm.gatewayID,
                            token: that.config.token,
                        })
                        .then(function (res) {
                            that.loading.orders = false;
                            if (res.data.resultCode == "success") {
                                that.$message({
                                    message: '发单成功',
                                    type: 'success'
                                });
                            } else {
                                that.$notify({
                                    title: '警告',
                                    message: '发单失败,服务器未返回成功',
                                    type: 'warning',
                                    duration: 4500,
                                });
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                            that.loading.orders = false;
                            that.$notify({
                                title: '错误',
                                message: '发单失败,发生异常',
                                type: 'error',
                                duration: 0,
                            });
                        });
                }

            },
            subscribe(target) {

                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                const that = this;
                if (typeof (target) !== "object") {
                    var _rtSymbol = target
                } else {
                    var _rtSymbol = this.tradeForm.rtSymbol
                }
                if (this.config.token == undefined || this.config.token == "") {
                    this.getToken()
                }
                if (_rtSymbol == undefined || _rtSymbol == "") {
                    return this.$alert('请输入代码', '提示', {
                        confirmButtonText: '确定',
                    });
                } else {
                    this.loading.subScribe = true;
                    axios.post(host + "/subscribe", {
                            rtSymbol: _rtSymbol,
                            token: this.config.token
                        })
                        .then(res => {
                            that.loading.subScribe = false;
                            if (res.data.resultCode == "success") {
                                let target = _rtSymbol
                                that.clickTick(target)
                                that.tradeForm.rtSymbol = target;
                                that.$message({
                                    message: '订阅指令发送成功',
                                    type: 'success'
                                });
                            } else {
                                that.$notify({
                                    title: '警告',
                                    message: '订阅失败,服务器未返回成功!',
                                    type: 'warning',
                                    duration: 4500
                                });
                            }
                        })
                        .catch(res => {
                            that.loading.subScribe = false;
                            console.log(res)
                            that.$notify({
                                title: '错误',
                                message: '订阅失败,发生异常!',
                                type: 'error',
                                duration: 0
                            });
                        })

                }
            },
            cancelOrder(e) {
                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                let that = this,
                    rtOrderID = e;
                axios.post(host + '/cancelOrder', {
                        rtOrderID: rtOrderID,
                        token: this.config.token,
                    })
                    .then(res => {
                        if (res.data.resultCode == "success") {
                            that.$message({
                                message: '撤单指令已发送',
                                type: 'success'
                            });
                        } else {
                            that.$notify({
                                title: '警告',
                                message: '撤单失败,服务器未返回成功!',
                                type: 'warning',
                                duration: 4500
                            });
                        }
                    })
                    .catch(res => {
                        console.log(res)
                        that.$notify({
                            title: '错误',
                            message: '撤单失败,发生异常!',
                            type: 'error',
                            duration: 0
                        });
                    })
            },
            cancelAllOrders(e) {

                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                let that = this;
                axios.post(host + '/cancelAllOrders', {
                        token: this.config.token,
                    })
                    .then(res => {
                        if (res.data.resultCode == "success") {
                            that.$message({
                                message: '全撤指令已发送',
                                type: 'success'
                            });
                        } else {
                            that.$notify({
                                title: '警告',
                                message: '全撤失败,服务器未返回成功!',
                                type: 'warning',
                                duration: 4500
                            });
                        }
                    })
                    .catch(res => {
                        console.log(res)
                        that.$notify({
                            title: '错误',
                            message: '全撤失败,发生异常!',
                            type: 'error',
                            duration: 0
                        });
                    })
            },
            contractClick(row) {
                this.subscribe(row.rtSymbol)
            },
            handleTab(tab) {
                const that = this;
                if (tab.name == "search") {
                    this.getContract()
                } else if (tab.name == "gateway") {
                    this.getGateway()
                } else if (tab.name == "zeus") {
                    this.getZeusStrategy();
                } else if (tab.name == "home") {
                    this.getGateway()
                }
            },
            getContract() {

                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                this.loading.contracts = true;
                const that = this;
                if (that.contracts.length == 0) {
                    axios.get(host + "/getContracts?token=" + this.config.token)
                        .then(res => {
                            that.loading.contracts = false;
                            if (res.data.resultCode == "success") {
                                let contractArray = res.data.data
                                if (contractArray !== undefined && contractArray.length > 0) {
                                    const seen = new Set()
                                    that.contracts = contractArray.filter((contract) => !seen.has(contract.rtSymbol) &&
                                        seen.add(contract.rtSymbol))
                                }

                            } else {
                                that.$notify({
                                    title: '警告',
                                    message: '获取合约失败,服务器未返回成功!',
                                    type: 'warning',
                                    duration: 4500
                                });
                            }
                        })
                        .catch(res => {
                            that.loading.contracts = false;
                            console.log("res", res)
                            that.$notify({
                                title: '错误',
                                message: '获取合约失败,发生异常!',
                                type: 'error',
                                duration: 0
                            });
                        })
                } else {
                    that.loading.contracts = false;
                }

            },
            getGateway() {

                if (this.config.token == undefined || this.config.token == "") {
                    this.$alert('请先登录', '警告', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                const that = this;
                that.loading.gateways = true
                axios.get(host + "/getGatewaySettings?token=" + this.config.token)
                    .then(function (res) {
                        that.loading.gateways = false
                        if (res.data.resultCode == "success") {
                            that.gateways = res.data.data
                            that.tradeGateways = []
                            that.gateways.forEach(gatewayInfo => {
                                if (gatewayInfo.runtimeStatus == true) {
                                    that.tradeGateways.push(gatewayInfo);
                                }
                            });

                            //console.log(that.tradeGateways)

                        } else {
                            that.$notify({
                                title: '警告',
                                message: '获取接口失败,服务器未返回成功!',
                                type: 'warning',
                                duration: 4500
                            });
                        }

                    })
                    .catch(function (res) {
                        that.loading.gateways = false
                        console.log(res)
                        that.$notify({
                            title: '错误',
                            message: '获取接口失败,发生异常!',
                            type: 'error',
                            duration: 0
                        });
                    });

            },
            registerTick(target) {
                let that = this;
                socket.on("E_TICK|", function (data) {
                    // console.log(data)
                    that.ticks.forEach(function (tick) {
                        tick.priceRatio = (((tick.lastPrice / tick.preClosePrice) - 1) * 100.0)
                            .toFixed(2) + "%"
                        that.tickMap.set(tick.rtSymbol, tick);

                        // 用于在key不确定的情况下能查找到tick
                        that.mixTickMap.set(tick.rtSymbol, tick);
                        that.mixTickMap.set(tick.symbol, tick);
                    });
                    that.tickMap.set(data.rtSymbol, data);


                    data.priceRatio = (((data.lastPrice / data.preClosePrice) - 1) * 100.0).toFixed(2) +
                        "%"
                    // 用于在key不确定的情况下能查找到tick
                    that.mixTickMap.set(data.rtSymbol, data);
                    that.mixTickMap.set(data.symbol, data);

                    if (that.tradeForm.rtSymbol == data.rtSymbol || that.tradeForm.rtSymbol == data.symbol) {

                        that.leftTrade = data

                        if (that.tradeForm.priceFill == "最新价") {
                            that.tradeForm.orderPrice = data.lastPrice
                        } else if (that.tradeForm.priceFill == "A/B-1") {
                            if (that.tradeForm.direction == "多") {
                                that.tradeForm.orderPrice = data.askPrice1
                            } else if (that.tradeForm.direction == "空") {
                                that.tradeForm.orderPrice = data.bidPrice1
                            } else {
                                that.tradeForm.orderPrice = data.lastPrice
                            }
                        }

                    }

                });
            },
            clickTick(e) {
                let that = this,
                    target = e.rtSymbol || e;

                that.tradeForm.rtSymbol = target
                if(that.mixTickMap.has(that.tradeForm.rtSymbol)){
                    that.leftTrade = that.mixTickMap.get(that.tradeForm.rtSymbol);
                    let data = that.leftTrade;
                    if (that.tradeForm.priceFill == "最新价") {
                        that.tradeForm.orderPrice = data.lastPrice
                    } else if (that.tradeForm.priceFill == "A/B-1") {
                        if (that.tradeForm.direction == "多") {
                            that.tradeForm.orderPrice = data.askPrice1
                        } else if (that.tradeForm.direction == "空") {
                            that.tradeForm.orderPrice = data.bidPrice1
                        } else {
                            that.tradeForm.orderPrice = data.lastPrice
                        }
                    }

                }else{
                    that.leftTrade = {}
                }
            },
            registerOrder() {
                let that = this;
                socket.on("E_ORDER|", function (data) {
                    that.orders.forEach(function (order) {
                        that.orderMap.set(order.rtOrderID, order);
                    });
                    that.orderMap.set(data.rtOrderID, data);
                    that.ordersChange = true;
                    // 避免性能问题，改为定时刷新
                    // that.orders = Array.from(that.orderMap.values()).sort(that.sortOrderByTimeAndID)
                });
            },
            registerAccount() {
                let that = this;
                socket.on("E_ACCOUNT|", function (data) {
                    that.accounts.forEach(function (account) {
                        that.accountMap.set(account.rtAccountID, account);
                    });
                    that.accountMap.set(data.rtAccountID, data);
                    that.accounts = Array.from(that.accountMap.values())
                });
            },
            registerPosition() {
                let that = this;
                socket.on("E_POSITION|", function (data) {
                    that.positions.forEach(function (position) {
                        that.positionMap.set(position.rtPositionName, position);
                    });
                    that.positionMap.set(data.rtPositionName, data);
                    that.positions = Array.from(that.positionMap.values()).sort(sortSymbol)
                });
            },
            registerTrade() {
                let that = this;
                socket.on("E_TRADE|", function (data) {
                    that.trades.forEach(function (trade) {
                        that.tradeMap.set(trade.rtTradeID, trade);
                    });
                    that.tradeMap.set(data.rtTradeID, data);
                    that.tradesChange = true;
                    // 避免性能问题，改为定时刷新
                    // that.trades = Array.from(that.tradeMap.values()).sort(that.sortTradeByTimeAndID)
                });
            },
            registerLog() {
                let that = this;
                socket.on("E_LOG|", function (data) {
                    that.logs = that.logs.concat(data).reverse()
                });
            },
            handleTabLeft(tab, event) {},
            handleTabRight(tab, event) {},
            registerConnectionStatus() {
                const that = this;
                socket.on('disconnect', function () {
                    that.connection = '已断开'
                    that.$notify({
                        title: '警告',
                        message: '服务器连接已断开',
                        type: 'error',
                        duration: 4500,
                    });
                });
                socket.on('connect_failed', function () {
                    that.connection = '连接失败'
                    that.$notify({
                        title: '警告',
                        message: '服务器连接失败',
                        type: 'error',
                        duration: 4500,
                    });
                });
                socket.on('connect', function () {
                    that.connection = '已连接'
                    that.$notify({
                        title: '成功',
                        message: '服务器连接成功',
                        type: 'success',
                        duration: 1000,
                    });
                });
                socket.on('connecting', function () {
                    that.connection = '正在连接'
                });
                socket.on('error', function () {
                    that.connection = '连接错误'
                    that.$notify({
                        title: '警告',
                        message: '服务器连接错误',
                        type: 'error',
                        duration: 4500,
                    });
                });
                socket.on('connect_error', function () {
                    that.connection = '连接错误'
                    that.$notify({
                        title: '警告',
                        message: '服务器关闭或Token已过期，请尝试刷新页面登录',
                        type: 'error',
                        duration: 4500,
                    });
                    sessionStorage.removeItem("token")
                });
            },
        }
    })
</script>

</html>